<template>
    <div class="menu-box">
        <div class="header">
            <div class="title">Menu</div>
        </div>
        <div class="body">
            <div class="link-item" v-for="item in link_list" :key="item.id">
                <div class="icon" :style="`--w: 1vw; --h: 1vw; --icon: url(${ item.icon })`"></div>
                <div class="text">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
const link_list = [
    {
        id: 1,
        icon: '/icon/menu/markets.svg',
        text: 'Markets',
        click: () => {}
    },
    {
        id: 2,
        icon: '/icon/menu/portfolio.svg',
        text: 'Assets',
        click: () => {}
    },
    {
        id: 3,
        icon: '/icon/menu/trade.svg',
        text: 'Trade',
        click: () => {}
    },
    {
        id: 4,
        icon: '/icon/menu/analytics.svg',
        text: 'Analytics',
        click: () => {}
    },
];
</script>

<style scoped lang="less">
.menu-box {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
    border-radius: 0.5vw;

    .header {
        padding: 0.9vw;
        border-bottom: 0.1vw solid rgba(0, 0, 0, 0.1);

        .title {
            font-size: 0.9vw;
            font-weight: 500;
            color: #333;
        }
    }

    .body {
        padding: 0.5vw;
        
        .link-item {
            padding: 0.6vw;
            border-radius: 0.5vw;
            display: flex;
            align-items: center;
            cursor: pointer;
            gap: 0.5vw;
    
            &:hover {
                background-color: var(--bg-strong-color);
            }
            
            .text {
                font-size: 0.8vw;
            }
        }
    }
}
</style>